<template>
	<div class="pageBox">
		<commonHeader></commonHeader>

		<div class="pageBoxTop clearfix">
			<div class="fl">
				<div class="clearfix">
					<div class="fl clearfix mr30">
						<div class="beautyBg">{{String(dateYear).substr(0,1)}}</div>
						<div class="beautyBg">{{String(dateYear).substr(1,1)}}</div>
						<div class="beautyBg">{{String(dateYear).substr(2,1)}}</div>
						<div class="beautyBg">{{String(dateYear).substr(3,1)}}</div>
						<div class="noBeautyBg">-</div>
						<div class="beautyBg">{{String(dateMonth).substr(0,1)}}</div>
						<div class="beautyBg">{{String(dateMonth).substr(1,1)}}</div>
						<div class="noBeautyBg">-</div>
						<div class="beautyBg">{{String(dateDay).substr(0,1)}}</div>
						<div class="beautyBg">{{String(dateDay).substr(1,1)}}</div>
					</div>
					<div class="fl clearfix">
						<div class="beautyBg">{{String(timeHour).substr(0,1)}}</div>
						<div class="beautyBg">{{String(timeHour).substr(1,1)}}</div>
						<div class="noBeautyBg">:</div>
						<div class="beautyBg">{{String(timeMin).substr(0,1)}}</div>
						<div class="beautyBg">{{String(timeMin).substr(1,1)}}</div>
						<div class="noBeautyBg">:</div>
						<div class="beautyBg">{{String(timeSeconds).substr(0,1)}}</div>
						<div class="beautyBg">{{String(timeSeconds).substr(1,1)}}</div>
					</div>
				</div>
			</div>
			<div class="fl modelBox">
				<div class="mr30">
					<span class="mr10">模式</span>
					<el-select v-model="value" placeholder="请选择">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="airType" :class="index == airTypeActiveIndex ? 'airTypeActive' : ''" v-for="(item,index) in airTypeForm" :key="index" @click="airTypeActiveIndex = index;">
					<div class="airTypePoints"></div>
					<span>{{item.name}}</span>
				</div>
			</div>
			<div class="fr pageRightSection">
				<div class="pageRightBox"> 
					<span>当前开启阀门：24</span>
					<span class="ml20">出气阀门状态：出气</span>
				</div>
				<div class="pageRightBox"> 
					<i class="el-icon-s-tools"></i> 
					设置
				</div>
			</div>
		</div>

		<div class="pageBoxContent">
			<div class="cardBox">
				<div class="cardBoxTitle">便携仪采集动态表格/保存</div>
				<div class="cardBoxContent">
					<div id="lineChart" class="chart"></div>
				</div>
			</div>
		</div>

		<div class="pageBoxContent">
			<div class="cardBox">
				<div class="cardBoxTitle">便携仪采数据+数据采集时间	</div>
				<div class="cardBoxContent">
					<el-table
						stripe
						:header-cell-style="{backgroundColor:'#30695c',color:'#fff',}"
						:row-class-name="tabRowClassName"
						:data="tableData"
						style="width: 100%">
						<el-table-column
							align="center"
							prop="date"
							label="时间"
							width="200">
						</el-table-column>
						<el-table-column
							v-for="(controlItem,index) in controlForm"
							:key="index"
							align="center"
							prop="name"
							:label="controlItem.name"
							width="100">
						</el-table-column>
						<el-table-column
							align="center"
							prop="tag"
							label="气味标签"
							width="200">
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<div class="pageBottomBox">
			<div class="pageBottomBoxLeft">
				<div class="pageBottomBoxLeftItem">
					<span class="mr10">开始时间</span>
					<div class="pageBottomBoxLeftItemVal">2021.06.11  16:00:00</div>
				</div>
				<div class="pageBottomBoxLeftItem">
					<span class="mr10">总剩余时间</span>
					<div class="pageBottomBoxLeftItemVal">2021.06.11  16:00:00</div>
				</div>
				<div class="pageBottomBoxLeftItem">
					<span class="mr10">结束时间</span>
					<div class="pageBottomBoxLeftItemVal">-.-.-  -:-:-</div>
				</div>
				<div class="pageBottomBoxLeftItem">
					<span class="mr10">循环次数</span>
					<div class="pageBottomBoxLeftItemVal" style="width:65px;">56</div>
				</div>
				<div class="pageBottomBoxLeftItem">
					<span class="mr10">总循环次数</span>
					<div class="pageBottomBoxLeftItemVal" style="width:65px;">99</div>
				</div>
			</div>
			<div class="pageBottomBoxRightButton" @click="$router.push('/collect');">开始采集</div>
		</div>
	</div>
</template>

<script>
	let interVal
	import commonHeader from '../commonComponents/commonHeader.vue'
	export default {
		components:{
			commonHeader
		},
		data () {
			return {
				dateYear:'',
				dateMonth:'',
				dateDay:'',
				timeHour:'',
				timeMin:'',
				timeSeconds:'',

				options: [
					{
						value:'自动模式',
						label:'自动模式'
					},
					{
						value:'手动模式',
						label:'手动模式'
					},
				],
				value: '自动模式',

				airTypeForm:[
					{name:'换气'},
					{name:'进气'},
					{name:'采样'},
				],
				airTypeActiveIndex:0,

				controlForm:[
					{name:'1号'},
					{name:'2号'},
					{name:'3号'},
					{name:'4号'},
					{name:'5号'},
					{name:'6号'},
					{name:'7号'},
					{name:'8号'},
					{name:'9号'},
					{name:'10号'},
					{name:'11号'},
					{name:'12号'},
					{name:'13号'},
					{name:'14号'},
					{name:'15号'},
					{name:'16号'},
					{name:'17号'},
					{name:'18号'},
					{name:'19号'},
					{name:'20号'},
					{name:'21号'},
					{name:'22号'},
					{name:'23号'},
					{name:'24号'},
					{name:'25号'},
					{name:'26号'},
					{name:'27号'},
					{name:'28号'},
					{name:'29号'},
					{name:'30号'},
				],
				tableData:[
					{
						date:'6.15  23:21:24',
						tag:'气味标签'
					},
					{
						date:'6.15  23:21:24',
						tag:'气味标签'
					},
					{
						date:'6.15  23:21:24',
						tag:'气味标签'
					},
				],

			}
		},
		mounted(){
			let _this = this;
			interVal = setInterval(function(){
				_this.getDateAndTime();
			},1000);

			this.initChart();
		},
		destroyed(){
			clearInterval(interVal);
		},
		methods:{
			tabRowClassName({ rowIndex }){
				if (rowIndex % 2 === 0) {
					return "warning-row";
				} else if (rowIndex % 2 === 1) {
					return "success-row";
				}
				return "";
			},
			getDateAndTime(){
				this.dateYear = new Date().getFullYear();
				this.dateMonth = (new Date().getMonth()+1) < 10 ? ('0' + (new Date().getMonth()+1)) : (new Date().getMonth()+1);
				this.dateDay = new Date().getDate() < 10 ? ('0' + (new Date().getDate())) : (new Date().getDate());
				this.timeHour = new Date().getHours() < 10 ? ('0' + (new Date().getHours())) : (new Date().getHours());
				this.timeMin = new Date().getMinutes() < 10 ? ('0' + (new Date().getMinutes())) : (new Date().getMinutes());
				this.timeSeconds = new Date().getSeconds() < 10 ? ('0' + (new Date().getSeconds())) : (new Date().getSeconds());
			},
			initChart(){
				let dom = document.getElementById('lineChart');
      			let lineChart = this.echarts.init(dom);

				lineChart.setOption({
					color:['#E51B57','#06B4CD','#44A546','#C6D731','#FE8D00','#5C32AE','#FF4D1F','#048B7D','#6D4B3F','#557280'],
					legend: {
						textStyle:{
							color:'#fff'
						}
					},
					tooltip : {
						trigger: 'axis',
						axisPointer : {            // 坐标轴指示器，坐标轴触发有效
							type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					dataset: {
						source: [
							['product', '2012', '2013', '2014', '2015', '2016', '2017'],
							['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
							['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
							['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
							['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
						]
					},
					xAxis: {
						type: 'category',
						axisLine:{
							show: true
						},
						splitLine: {
							show: false
						},
						axisLabel :{
							show:false
						}
					},
					yAxis: {
						gridIndex: 0,
						axisLine:{
							show:false
						},
						axisLabel :{
							show:false
						},
					},
					grid: {top: '18%',left: '0',right: '0',bottom:'0'},
					series: [
						{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
						{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
						{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
						{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
					]
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.pageBox{
		width: 100%;
		min-height: 100vh;
		background: #000;
		box-sizing: border-box;
		padding: 160px 0 176px;
		font-family: PingFang SC;
		font-style: normal;	
	}
	.pageBoxTop{
		width: 100%;
		height: 120px;
		background-color: #000;
		position: fixed;
		top: 60px;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		padding: 40px 50px 0;
	}
	.beautyBg{
		width: 30px;
		height: 60px;
		color: #fff;
		font-size: 26px;
		font-weight: 600;
		box-sizing: border-box;
		position: relative;
		text-align: center;
		line-height: 60px;
		float: left;
		margin-right: 3px;
	}
	.beautyBg:nth-last-child(1){
		margin-right: 0;
	}
	.beautyBg:before{
		content:' ';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 28.5px;
		background-color: #233742;
		z-index: -1;
		border-radius: 4px;
	}
	.beautyBg:after{
		content:' ';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 28.5px;
		background-color: #233742;
		z-index: -1;
		border-radius: 4px;
	}
	.noBeautyBg{
		width: 20px;
		height: 60px;
		color: #fff;
		font-size: 26px;
		font-weight: 600;
		box-sizing: border-box;
		position: relative;
		text-align: center;
		line-height: 60px;
		float: left;
		margin-right: 3px;
	}
	.modelBox{
		margin-left: 60px;
		height: 60px;
		color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: flex-start;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: flex-start;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: flex-start;
	}
	.airType{
		width: 76px;
		height: 38px;
		background: rgba(255, 129, 71, 0.3);
		border-radius: 19px;
		color: #fff;
		font-size: 14px;
		margin-right: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: center;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: center;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: center;
		cursor: pointer;
	}
	.airType:nth-last-child(1){
		margin-right: 0;
	}
	.airTypeActive{
		background: #FF8147;
	}
	.airTypePoints{
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background-color: #fff;
		margin-right: 5px;
	}
	.pageRightBox{
		display: inline-block;
		height: 38px;
		border-radius: 19px;
		color: #fff;
		box-sizing: border-box;
		padding: 0 20px;
		background-color: #233742;
		text-align: center;
		line-height: 38px;
		margin-right: 10px;
		font-size: 14px;
	}
	.pageRightBox:nth-last-child(1){
		margin-right: 0;
	}
	.pageRightSection{
		height: 60px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: center;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: center;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: center;
		cursor: pointer;
	}
	.pageBoxContent{
		width: 100%;
		box-sizing: border-box;
		padding: 0 50px;
		margin-top: 25px;
	}
	.cardBox{
		margin-bottom: 20px;
		background-color: #233742;
	}
	.cardBoxTitle{
		width: 100%;
		height: 60px;
		line-height: 60px	;
		box-sizing: border-box;
		padding: 0 20px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
		font-size: 18px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	.cardBoxContent{
		width: 100%;
		box-sizing: border-box;
		padding: 30px;
		background-color: #233742;
	}
	.chart{
		width: 100%;
		height: 330px;
	}
	.tableTitle{
		width: 100%;
		height: 74px;
		color: #fff;
		font-size: 20px;
		background: rgba(0, 187, 132, 0.3);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: flex-start;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: flex-start;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: flex-start;
		position: relative;
	}
	.fixedItem{
		position: absolute;
		top: 0;
		width: 200px;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: center;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: center;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: center;
	}
	.pageBottomBox{
		width: 100%;
		box-sizing: border-box;
		padding: 30px 50px;
		background-color: #1E1F25;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: space-between;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: space-between;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: space-between;
	}
	.pageBottomBoxLeft{
		width: 1100px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: flex-start;
		-moz-flex-wrap: wrap;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: flex-start;
		-ms-flex-wrap: wrap;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: flex-start;
		-webkit-flex-wrap: wrap;
	}
	.pageBottomBoxLeftItem{
		width: 320px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: flex-start;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: flex-start;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: flex-start;
		color: #fff;
		font-size: 16px;
		margin-bottom: 20px;
		margin-right: 20px;
	}
	.pageBottomBoxLeftItemVal{
		width: 230px;
		height: 38px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		-moz-flex-direction: row;
		-moz-align-items: center;
		-moz-justify-content: center;
		-ms-flex-direction: row;
		-ms-align-items: center;
		-ms-justify-content: center;
		-webkit-flex-direction: row;
		-webkit-align-items: center;
		-webkit-justify-content: center;
		border-radius: 19px;
		background-color: #233742;
	}
	.pageBottomBoxRightButton{
		width: 340px;
		height: 68px;
		background: #00BB84;
		border-radius: 34px;
		line-height: 68px;
		text-align: center;
		color: #fff;
		font-size: 20px;
		cursor: pointer;
	}
</style>

<style>
	.el-table--striped .el-table__body tr.el-table__row--striped td{
		background-color: initial !important;
	}
	.modelBox .el-input--suffix .el-input__inner{
		background: #45464B;
		border: 1px solid #7D7D7D;
		box-sizing: border-box;
		border-radius: 6px;
		color: #fff;
		font-size: 18px;
		background-color: rgba(0, 0, 0, 0.2);
	}
	.warning-row {
      background-color: rgba(0, 0, 0, 0.3) !important;
	  color: #fff;
    }
    .success-row {
      background-color: rgba(0, 0, 0, 0.5) !important;
	  color: #fff;
    }
	.el-table--enable-row-hover .el-table__body tr:hover>td{
		background-color: #212e3e !important;
	}
</style>